<template>
  <div>
    <div class="h1">
      <h1>管理员后台</h1>
    </div>
    
    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-s-custom"></i> 全用户管理</span>

        <el-tabs :tab-position="tabPosition">
          <el-tab-pane label="用户管理">
            <client />
          </el-tab-pane>
          <el-tab-pane label="教练管理"></el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="驾校管理">
        <el-tabs :tab-position="tabPosition">
          <el-tab-pane label="用户管理">
            <client />
          </el-tab-pane>
          <el-tab-pane label="教练管理"></el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="科目管理">
        <el-tabs :tab-position="tabPosition">
          <el-tab-pane label="用户管理">
            <client />
          </el-tab-pane>
          <el-tab-pane label="教练管理"></el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="社区管理">
        <el-tabs :tab-position="tabPosition">
          <el-tab-pane label="用户管理">
            <client />
          </el-tab-pane>
          <el-tab-pane label="教练管理"></el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="添加管理">添加管理

      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
//引入底部导航组件
import Client from "../components/Client.vue";

export default {
  components: {
    Client, //注册底部导航组件
  },
  data() {
    return {
      tabPosition: "left",
    };
  },
};
</script>
<style>
.h1{
  width: 100%;
  height: 80px;
  font-size: 30px;
  color: #fff;
  text-align: center;
  background-color: #606266;
}
</style>